<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="css/search.css" />
    <!-- 导入 jQuery -->
    <script src="js/jquery.js"></script>
    <script src="js/template-web.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- Logo -->
      <img src="img/baidu.png" alt="" class="logo" />

      <div class="box">
        <!-- 搜索区域（搜索框和搜索按钮） -->
        <div class="search-box">
          <input type="text" class="ipt" placeholder="请输入要搜索的内容" id="ipt"/>
          <button class="btnSearch">百度一下</button>
        </div>
        <!-- 搜索建议列表 -->
        <div id="suggest-list">

        </div>
      </div>
    </div>

    <!-- 模板结构引擎 -->
    <script type="text/html" id="tpl-suggestList">
      {{each result}}
        <!-- 搜素建议项 -->
        <div class="suggest-item">
          {{$value[0]}}
        </div>
      {{/each}}
    </script>

    <script>
      $(function(){
  //1.防抖动的timer
  var timer = null
  //定义全局缓存对象
  var cacheObj = {}


  //2.定义防抖的函数
  function debounceSearch(keywords){
    timer = setTimeout(function(){
      //发起JSONP请求
      getSuggestList(keywords)
    },500)
  }


  //监听文本框的keyup事件
  $('#ipt').on('keyup',function(){
    //3.在触发keyup事件时，立即清空timer
    clearTimeout(timer)
    //获取用户输入的内容
    var keywords = $(this).val().trim()
    //判断用户输入的内容是否为空
    if(keywords.length <= 0){
      return $('#suggest-list').empty().hide()
    }

    //优先从缓存中获取搜索建议
    if(cacheObj[keywords]){
      return renderSuggestList(cacheObj[keywords])
    }


    //TODO：获取搜素建议列表
    //console.log(keywords);
    //getSuggestList(keywords)
    debounceSearch(keywords)
  })

  function getSuggestList(kw){
    $.ajax({
      //指定请求的URL地址，其中q是用户输入的关键字
      url:'https://suggest.taobao.com/sug?q='+kw,
      //指定要发起的是 JSONP 请求
      dataType:'jsonp',
      //成功的回调函数
      success:function(res){
        renderSuggestList(res)
      }
    })
  }

  //渲染建议列表
  function renderSuggestList(res){
    //如果没有需要渲染的数据,则直接 return 
    if(res.result.length <= 0){
      return $('#suggest-list').empty().hide()
    }
    //渲染模板结构
    var htmlStr = template('tpl-suggestList',res)
    $('#suggest-list').html(htmlStr).show()

    //1.获取用户输入的内容，当做键
    var k = $('#ipt').val().trim()
    //2.将搜索的结果，添加到缓存对象中
    cacheObj[k] = res
  }
})

    </script>
  </body>
</html>
